<template>
    <div>
        <el-card>
            <el-row :gutter="24">
                <el-col :span="4">
                    <el-input placeholder="影院名称" @keyup.enter.native="getCinemaList" size="small" class="input-with-select" v-model="queryInfo.name" clearable @clear="getCinemaList">
                     </el-input>
                </el-col>
                <el-col :span="5">
                  <el-select v-model="queryInfo.cityCode" filterable  size="small" clearable placeholder="请选择城市">
                    <el-option
                        v-for="item in cityList"
                        :key="item.cityCode"
                        :label='`${item.pinyin.substr(0,1).toUpperCase()}-${item.name}`'
                        :value="item.cityCode">
                    </el-option>
                  </el-select>
                </el-col>
              <el-col :span="5">
                <el-select v-model="queryInfo.lineId" filterable  size="small" clearable placeholder="请选择院线">
                  <el-option
                      v-for="item in gplineList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
                <el-col :span="4">
                    <el-select v-model="queryInfo.status" size="small" clearable placeholder="请选择状态" style="width: 120px;">
                        <el-option
                            v-for="item in hsOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                  <el-button type="primary" size="small" style="margin-left: 10px;"  @click="getCinemaList">搜索</el-button>
                </el-col>
                <el-col :span="3" style="text-align: right">
                    <el-button type="warning" size="small"  @click="cinemaSynch">同步影院</el-button>
                </el-col>
              <el-col :span="3" style="text-align: right">
                <el-button type="success" size="small"  @click="cinemaSynchMaoYan">同步影院特色</el-button>
              </el-col>
            </el-row>
            <el-table :data="cinemaList" border stripe>
                <el-table-column label="id" prop="id" width="80"></el-table-column>
                <el-table-column label="影院名称" prop="name"></el-table-column>
                <el-table-column label="城市" prop="cityName"  width="110"></el-table-column>
                <el-table-column label="区县" prop="countyName" width="130"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="标签" width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.tags" class="form_ipt" @change="updateTags(scope.row)" style="width:90px;"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="所属院线">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.lineId" @change="cinemaSetLine(scope.row)" size="small">
                      <el-option key="" label="" value="">默认</el-option>
                      <el-option
                          v-for="item in gplineList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="特殊厅">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.specialHallIdList" size="small" multiple @change="updateSpecialHall(scope.row)">
                      <el-option key="" label="" value="">默认</el-option>
                      <el-option
                          v-for="item in specialHallList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="购票渠道" width="120">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.channel" @change="updateChannel(scope.row)" size="small">
                        <el-option
                            v-for="item in channelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="更新状态">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.status" @change="updateStatus(scope.row)" size="small">
                        <el-option
                            v-for="item in hsOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="折扣率%" width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.discountRate" class="form_ipt" @change="updateDiscount(scope.row)" style="width:90px;"></el-input>
                  </template>
                </el-table-column>
              <el-table-column label="一口价" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fixedPrice" class="form_ipt" @change="updateFixedPrice(scope.row)" style="width:90px;"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="影厅">
                <template slot-scope="scope">
                  <router-link :to="{path:'/cinema/hall/list',query:{cinemaId:scope.row.id}}">设置(<span style="color: red">{{scope.row.hallCnt}}</span>)</router-link>
                </template>
              </el-table-column>

              <el-table-column label="接口返回">
                <template slot-scope="scope">
                  <router-link :to="{path:'/nl/opi/list/response',query:{cinemaId:scope.row.id}}">接口返回</router-link>
                </template>
              </el-table-column>

            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import Api from '@/api/Movie.js'
 import axios from 'axios'
export default {
    name: "cinemas",
    data() {
        return {
            queryInfo: {
                name: '',
                cityname: '',
                status: '',
                cityCode:null,
                lineId:null,
                pageNo: 1, // 页码
                pageSize: 10, // 页大小
            },
            hsOptions: [{
                value: 'Y',
                label: '正常购票'
            },{
                value: 'N',
                label: '关闭'
            },{
                value: 'S',
                label: '刷票关闭'
            }],
            channelList: [{
                value: '',
                label: '默认'
            },{
              value: 'n',
              label: '南里'
            },{
              value: 'm',
              label: '爬虫'
            }],
            cinemaList: [],
            gplineList: [],
            cityList: [],
            specialHallList: [],
            total: 0
        }
    },
    created() {
        this.getCinemaList();
        this.getGplineList();
        this.getCityList();
        this.getSpecialHallList();
    },
    methods: {
        getCinemaList() {
            Api.getCinemaList(this.queryInfo).then(res => {
                if (res.success) {
                    this.cinemaList = res.data.records
                    this.total = res.data.total
                } else {
                    return this.$message.error('获取影院列表失败')
                }
            })
        },
      getCityList() {
        Api.getCityList({}).then(res => {
          if (res.success) {
            this.cityList = res.data
          } else {
            return this.$message.error('获取城市列表失败')
          }
        })
      },
        getGplineList() {
          Api.getCinemaGplineList(this.queryInfo).then(res => {
            if (res.success) {
              this.gplineList = res.data;
            } else {
              return this.$message.error('获取数据失败')
            }
          })
        },
      getSpecialHallList() {
        Api.getSpecialHallList(this.queryInfo).then(res => {
          if (res.success) {
            this.specialHallList = res.data;
          } else {
            return this.$message.error('获取数据失败')
          }
        })
      },
        updateStatus(cinemainfo) {
            Api.cinemaUpdateStatus({'id':cinemainfo.id, 'status':cinemainfo.status}).then(res => {
                if (res.success) {
                    this.$message.success('更新状态成功！')
                } else {
                    return this.$message.error('更新状态失败！')
                }
            })
        },
        updateChannel(cinemainfo) {
          Api.cinemaUpdateChannel({'id':cinemainfo.id, 'channel':cinemainfo.channel}).then(res => {
            if (res.success) {
              this.$message.success('设置成功！')
            } else {
              return this.$message.error('设置失败！')
            }
          })
        },
      updateSpecialHall(cinemainfo) {
        Api.setCinemaSpecialHallIds({'id':cinemainfo.id, 'specialHallIds':cinemainfo.specialHallIdList.join(',')}).then(res => {
          if (res.success) {
            this.$message.success('设置成功！')
          } else {
            return this.$message.error('设置失败！')
          }
        })
      },
        updateTags(cinemainfo) {
          Api.updateCinemaTags({'id':cinemainfo.id, 'tags':cinemainfo.tags}).then(res => {
            if (res.success) {
              this.$message.success('设置成功！')
            } else {
              return this.$message.error('设置失败！')
            }
          })
        },
        updateDiscount(cinemainfo) {
            Api.cinemaUpdateDiscount({'id':cinemainfo.id, 'discountRate':cinemainfo.discountRate}).then(res => {
                if (res.success) {
                    this.$message.success('设置成功！')
                } else {
                    return this.$message.error('设置失败！')
                }
            })
        },
        updateFixedPrice(cinemainfo) {
          Api.cinemaUpdateFixedPrice({'id':cinemainfo.id, 'fixedPrice':cinemainfo.fixedPrice}).then(res => {
            if (res.success) {
              this.$message.success('设置成功！')
            } else {
              return this.$message.error('设置失败！')
            }
          })
        },
        cinemaSetLine(cinemainfo) {
          Api.cinemaSetLine({'id':cinemainfo.id, 'lineId':cinemainfo.lineId}).then(res => {
            if (res.success) {
              this.$message.success('设置成功！')
            } else {
              return this.$message.error('设置失败！')
            }
          })
        },
        cinemaSynch() {
            this.$message.success('同步中......')
            Api.cinemaSynch({}).then(res => {
                if (res.success) {
                    this.$message.success('同步成功！')
                } else {
                    return this.$message.error('更新状态失败！')
                }
            })
        },

      cinemaSynchMaoYan() {
        this.$message.success('同步中......')
        Api.cinemaSynchMaoYan({}).then(res => {
          if (res.success) {
            this.$message.success('同步成功！')
          } else {
            return this.$message.error('更新状态失败！')
          }
        })
      },

        exportCinema(){
            let downloadUrl = process.env.VUE_APP_BASE_API + "api/cinema/export";
            let uuid = '';
            if(localStorage.getItem('uuid')){
              uuid = localStorage.getItem('uuid');
            }
            this.loading = true;
            this.$message.info("开始下载中...");
            axios({
                method: 'post',
                url: downloadUrl,
                headers: {
                  uuid: uuid
                },
                responseType: "blob"
            })
                .then(res => {
                    this.loading = false;
                    const link = document.createElement('a');
                    let blob = res;
                    var fileName = '影院.xlsx';
                    link.style.display = 'none';
                    var href =URL.createObjectURL(blob);
                    link.href =href;
                    link.setAttribute('download',  fileName);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                    this.$message.success("下载成功");
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error("下载失败");
                });
        },
        handleSizeChange(pageSize) {
            this.queryInfo.pageNo = 1
            this.queryInfo.pageSize = pageSize
            this.getCinemaList()
        },
        // 监听pageNo的事件
        handleCurrentChange(pageNo) {
            this.queryInfo.pageNo = pageNo
            this.getCinemaList()
        }
    }
}
</script>

<style>

</style>
